<template>
  <view class="animated fadeIn faster m-2" style="min-height: 100vh;">
    <view class="searchBox px-2 rounded20 d-flex-item d-flex d-flex-middle bg-fff">
      <input v-model="formData.name" class="pl-1 rounded10 font30 d-flex-item" placeholder="搜索题库"
              placeholder-class="colorhold"/>
      <text v-if="formData.name" class="text-right iconfont icon-cuo1 main-color ml-1"
            @click="dataCancel"></text>
      <text class="iconfont icon-icon_sousuo main-color font40  text" @click="onSearch"></text>
    </view>

    
	<view style="padding-top: 200rpx;">
		<view class="d-flex d-flex-center">
			<image class="mb-2"
				src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
				style="width: 198rpx;height: 128rpx;"></image>
			
		</view>
		<view class="d-flex d-flex-center">
			<text class="colorhold">~ 暂无任何题库 ~</text>
		</view>
	</view>
    <!-- <view class="course-list mt-3">
      <view v-for="(course, index) in courseList" :key="index" class="course-item bg-fff rounded10 mb-2 p-2">
        <view class="d-flex">
          
          <view class="course-cover mr-2">
            <image
                :src="course.course_image"
                mode="aspectFill" style="width: 200rpx; height: 150rpx; border-radius: 10rpx;"
            ></image>
          </view>

          
          <view class="course-info d-flex-item">
            <view class="course-title font30 font-bold mb-1">{{ course.course_name }}</view>
            <view class="course-8e8e8e color-92 font24 mb-1">
              <text>{{ course.course_id }} 课时</text>
              <text class="ml-3">已听 {{ course.view_duration_text }}</text>
            </view>
            <view class="d-flex d-flex-between d-flex-middle">
              <view class="course-8e8e8e color-92 font24">
                <text>{{ course.view_date }}</text>
              </view>
              <view>
                <view
                    class="study-btn font20"
                    :class="course.status === '已完成' ? 'completed-btn' : 'continue-btn'"
                    @click="goUrl(`/subPages/courseDetails/courseDetails?id=${course.course_id}`)"
                >
                  {{ course.status === '已完成' ? '重新学习' : '去学习' }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
	  
    </view> -->
	
  </view>
</template>

<script>
import {fileApi} from '@/http/fileApi.js';
import {mapState} from "vuex"

export default {
  data() {
    return {
      formData: {
        name: ''
      },
      courseList: []
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState
    }),
  },
  onLoad() {
    this.goMyQuestion()
  },
  methods: {
    onSearch() {
      this.goMyQuestion();
    },
    dataCancel() {
      this.goMyQuestion.name = '';
      this.goMyCourses(); // 重新加载课程列表
    },
    async goMyQuestion() {
      let res = await fileApi.getMyQuestion({
        keyword: this.formData.name
      })
      console.log(res,'4444')
      this.courseList = res
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        uni.navigateTo({
          url: urlPages
        })
      }
    },
  }
}
</script>

<style scoped>
.searchBox {
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
}

.searchBox input {
  height: 100%;
}

.study-btn {
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  height: auto;
  line-height: 1;
}

.continue-btn {
  color: #3E8EFF;
  border: 1rpx solid #3E8EFF;
}

.completed-btn {
  color: #666;
  border: 1rpx solid #ddd;
}

.course-8e8e8e {
  color: #8e8e8e;
}
</style>
